<template>
	<view >
		<view class="headr" style="padding: 80rpx 20rpx">
		<text style="font-size: 36rpx;color: #FFFFFF;">香哈菜谱大全</text>
		<p style="color: #FFFFFF;font-size: 22rpx;" >小白学做菜必备烹饪助手</p>
		</view>
		<view class=".content">
			<view class="input"  style="background-color: #F1F1F1;border-radius: 30rpx;height: 50rpx;display: flex;justify-content: center;align-items: center;margin-top: -70rpx;">
				<image src="../../static/image/home/caipusousuo_slices/mengbanzu%202.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
				<input type="text" value="" placeholder="共有99999道菜" style="width: 200rpx;font-size: 20rpx;margin-left: 20rpx;"/>
			</view>
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="margin-top: 20rpx;">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/image/home/caipusousuo_slices/NoPath%20%20(133).png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item> 
					<view class="swiper-item">
						<image src="../../static/image/home/caipusousuo_slices/NoPath%20-%20%20(129).png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="itmes">
				<view class="item">
					
				</view>
				<view class="item">
					
				</view>
				<view class="item">
					
				</view>
				<view class="item">
					
				</view>
				<view class="item">
					
				</view>
				<view class="item">
					
				</view>
				<view class="item">
					
				</view>
				<view class="item">
					
				</view>
				<view class="item">
					
				</view>
				<view class="item">
					
				</view>
			</view>
			<view class="items" style="display: flex; justify-content:space-between;margin-top: 10rpx;height: 300rpx;">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" 
				style="width: 330rpx">
					<swiper-item>
						<view class="swiper-item">
						<image  src="../../static/image/home/caipusousuo_slices/NoPath%20-%20%20(129).png" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item"><image  src="../../static/image/home/caipusousuo_slices/NoPath%20-%20%20(129).png" mode=""></image></view>
					</swiper-item>
				</swiper>
				<view style="width: 330rpx;">
					<view style="height: 140rpx;background-color: #007AFF;margin-bottom: 20rpx;"></view>
					<view style="height: 140rpx;background-color: #007AFF;"></view>
				</view>
			</view>
			<view class="itmes">
				<view class="Details">
					<image src="../../static/image/home/caipusousuo_slices/tupian.png" mode=""></image>
					<text style="font-size: 40rpx;font-weight: 400;">奶油泡芙 </text>
					<p style="font-weight: 200;font-size: 26rpx;" >180.0万 <image src="../../static/image/home/caipusousuo_slices/mengbanzu278(1).png" mode=""></image>
					 3.5万<image src="../../static/image/home/caipusousuo_slices/mengbanzu279.png" mode=""></image>
					 </p>
				</view>
				<view class="Details">
					<image src="../../static/image/home/caipusousuo_slices/tupian.png" mode=""></image>
					<text style="font-size: 40rpx;font-weight: 400;">奶油泡芙 </text>
					<p style="font-weight: 100;font-size: 26rpx;" >180.0万 <image src="../../static/image/home/caipusousuo_slices/mengbanzu278(1).png" mode=""></image>
					 3.5万<image src="../../static/image/home/caipusousuo_slices/mengbanzu279.png" mode=""></image>
					 </p>
				</view>
			</view>
			
			
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		methods: {
		
		}
	}
</script>

<style >
	.headr{
		height: 100rpx;
		background:url(../../static/image/home/caipusousuo_slices/ditu%20.png) ;
	}
	.content{
		padding: 40rpx;
		
	}
	.swiper-item image{
		width: 100%;
	}
	.itmes{
	display: flex;	
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 20rpx;
	}
	.item{
		width: 120rpx;
		height: 120rpx;
		margin-top: 20rpx;
		background-color: #4CD964;
	}
	.Details{
		width: 330rpx;
	}
	.Details image{
		width: 100%;
		height: 200rpx;
	}
	p image{
		width: 30rpx;
		height: 26rpx;
		vertical-align:middle;
		margin-left: 20rpx;
	}
	p image:first-child{
		margin-right: 20rpx;
	} 
</style>
